/**
 * Created by python on 19-3-1.
 */
let vm = new Vue({
    el: '#app',
    data: {
        host: HOST,
        user_id: localStorage.user_id || sessionStorage.user_id,
        token: localStorage.token || sessionStorage.token,
        username: '',
        mobile: '',
        nickname: '',
        email: '',
        avatar_url: '',
        personal_url: '',
        email_active_info: false,

        // 此为用户横幅
        first_name: '',
        email_active: false,

        // 编辑状态
        nickname_edit: false,
        personal_url_edit: false,
        email_edit: false,
        mobile_edit: false,
        password_edit: false,

        // 编辑信息
        nickname_edit_info: '',
        personal_url_edit_info: '',
        email_edit_info: '',
        mobile_edit_info: '',
        password_edit_info: '',

        // 修改的数据
        data: {},

        set_email: false,
        send_email_btn_disabled: false,
        send_email_tip: '重新发送验证邮件',
        email_error: false,
        histories: [],

        QQ_bind: false
    },
    mounted: function(){
        this.get_user_info();
        this.get_QQ_bind();
    },
    methods: {
        // 获取当前登陆用户信息
        get_user_info: function(){
            if (this.user_id && this.token) {
                axios.get(this.host + '/user/', {
                        // 向后端传递JWT token的方法
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                    })
                    .then(response => {
                        // 加载用户数据
                        this.user_id = response.data.id;
                        this.username = response.data.username;
                        this.first_name = response.data.first_name;
                        this.nickname_edit_info = this.nickname = response.data.nickname;
                        this.mobile_edit_info = this.mobile = response.data.mobile;
                        this.email_edit_info = this.email = response.data.email;
                        this.email_active = response.data.email_active;
                        this.avatar_url = response.data.avatar_url;
                        this.personal_url_edit_info = this.personal_url = response.data.personal_url;

                    });
                     axios.get(this.host + '/resume/'+this.user_id, {
                            responseType: 'json',
                     })
                        .then(response=> {
                            this.company = response.data.company;
                            this.school = response.data.school;
                            this.city = response.data.city;
                        })
                    .catch(error => {
                        if (error.response.status==401 || error.response.status==403) {
                            location.href = '/person-loginsign.html?next=/person-account.html'
                        }
                    });
            } else {
                location.href = '/person-loginsign.html?next=/person-account.html'
            }
        },
        // 退出
        logout: function(){
            sessionStorage.clear();
            localStorage.clear();
            location.href = '/login.html';
        },
        // 保存用户名信息
        update_user_info: function(field, value){
            this.data[field] = value;
            let load = layer.load(1);
            axios.patch(this.host + '/put_user/', this.data, {
                    // 向后端传递JWT token的方法
                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                })
                .then(response => {
                    // 刷新nav用户数据
                    base_vm.loading_nav();
                    // 刷新当前页用户数据
                    this.get_user_info();
                    layer.close(load);
                    layer.msg('保存成功');

                })
                .catch(error => {
                    layer.close(load);
                    layer.msg(error.response.data[field][0]);
                });

        },
        // 修改用户头像
        // 打开图片上传
        uploadHeadImg: function () {
        this.$el.querySelector('.hiddenInput').click()
        },
        // 将头像显示
        handleFile: function (e) {
        let $target = e.target || e.srcElement;
        // 由于手机上可以选择多张图片，所以let file = $target.files[0]，表示取第一张图。
        let file = $target.files[0];
        var reader = new FileReader();
        reader.onload = (data) => {
            let res = data.target || data.srcElement;
            let avatar_base64 = res.result;
            // 结果为base64码，需要解码
            this.update_user_info("avatar_base64", avatar_base64);
            // console.log(avatar_base64)
            };
        reader.readAsDataURL(file);
        },
        // 发送验证邮件
        send_email:function () {
            this.email_active_info = true;
            axios.post(this.host+'/sendemails/',{
            },
            {
                headers: {
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json',
            })
            .then(response=>{
                layer.msg(response.data.msg)
            })
            .catch(error => {
                layer.msg(error.data.msg)
            })
        },
        get_QQ_bind:function () {
            axios.get(this.host+'/oauth/qq/'+ this.user_id +'/status/',
            {
                headers: {
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json',
            })
            .then(response=>{
                if(response.data.count>0){
                    this.QQ_bind = true;
                }else {
                    this.QQ_bind = false;
                }

            })
            .catch(error => {
                layer.msg('绑定状态获取失败')
            })
        },
        del_QQ_bind:function () {
            axios.delete(this.host+'/oauth/qq/'+ this.user_id +'/status/',
            {
                headers: {
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json',
            })
            .then(response=>{
                layer.msg('解绑成功')
            })
            .catch(error => {
                layer.msg(error.data.msg)
            })
            this.get_QQ_bind();
        },
        qq_login: function(){
            // var next = this.get_query_string('next') || '/';
            axios.get(this.host + '/oauth/qq/authorization/?next=/person-account.html', {
                    responseType: 'json'
                })
                .then(response => {
                    window.open(response.data.login_url);
                    // location.href = response.data.login_url;
                })
                .catch(error => {
                    console.log(error.response.data);
                })
        }
    }
});